<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出国留学语言水平测试卷-标准版</title>
    <script src="exam/tailwindcss.min.js"></script>
    <script src="exam/exam.js"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="exam/fontawesome.css">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#f97316',
                        neutral: '#f1f5f9',
                        success: '#10b981',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .play-button {
                @apply w-12 rounded-full bg-primary text-white flex items-center justify-center cursor-pointer
                shadow-lg hover:shadow-xl transition-all duration-300
                hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-primary/30;
            }

            .option-selected {
                @apply border-primary bg-primary/5 ring-1 ring-primary;
            }
        }

        @layer utilities {
            .btn-primary {
                @apply bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-all duration-200 focus:ring-2 focus:ring-primary/50 focus:outline-none;
            }

            .btn-secondary {
                @apply bg-white text-gray-700 border border-gray-300 px-6 py-2 rounded-md hover:bg-gray-50 transition-all duration-200;
            }

            .btn-accent {
                @apply text-gray-700 border border-gray-300 px-6 py-2 rounded-md hover:bg-gray-50 transition-all duration-200;
            }

            .section-title {
                @apply text-xl font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200;
            }
        }

        h1, h2, h3, h4, h5, h6 {
            @apply text-center;
        }

        /* 空白区域样式 */
        .blank-wrapper {
            position: relative;
            display: inline-block;
            padding-left: 20px;
            margin: 0 20px;
        }

        .blank {
            width: 200px;
            height: 2px;
            background: #333;
            align-self: center;
            position: relative;
            top: -3px;
        }

        .article-content {
            /* 隐藏滚动条但保留滚动功能 */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        .article-content::-webkit-scrollbar-thumb {
            background-color: rgba(156, 163, 175, 0.5);
            border-radius: 3px;
        }

        .article-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .article-content::-webkit-scrollbar {
            width: 6px;
        }

        /* 数字标记样式 */
        .blank-number {
            position: absolute;
            padding: 0 20px;
            font-size: 16px;
            color: #666;
            width: 20px;
            height: 30px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: -10px;
            right: -10px;
        }

        /* 悬停效果 */
        .blank-wrapper:hover .blank {
            background: #2563eb;
        }

        .blank-wrapper:hover .blank-number {
            background: #2563eb;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center">

        <!-- 左侧图片 -->
        <div class="flex items-center">
            <a href="#" class="flex items-center">
                <img src="./img/exam-logo.png" alt="网站Logo" style="width: 300px;height: 80px"
                     class="h-10 w-full rounded-full object-cover">
                <span class="ml-3 text-xl font-bold text-gray-800"></span>
            </a>
        </div>

        <div class="flex items-center mb-3 md:mb-0">
            <h1 class="text-lg md:text-xl font-bold">出国留学语言水平测试卷-标准版</h1>
        </div>

        <div class="flex items-center w-full md:w-auto justify-between">
            <div class="flex items-center mr-4">
                <i class="fa fa-clock-o text-accent mr-2"></i>
                <span id="timer" class="font-mono text-accent">40:00</span>
            </div>

            <button id="submitBtn" class="btn-primary flex items-center">
                <i class="fa fa-paper-plane mr-2"></i>
                <span>交卷</span>
            </button>

            <button class="btn-accent flex items-center ml-2">
                <i class="fa fa-book-atlas mr-2"></i>
                <span onclick='showCorrectAnswer(false)'>检查</span>
            </button>

            <button class="btn-accent flex items-center ml-2">
                <i class="fa fa-map mr-2"></i>
                <span onclick='showCorrectAnswer(true)'>判卷</span>
            </button>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-6">
    <!-- 试卷信息 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
            <div>
                <p class="text-gray-600">考试时间：40分钟</p>
            </div>
            <div class="mt-4 md:mt-0 flex flex-col items-end">
                <p>姓名：
                    <input type="text"
                           id="name"
                           placeholder="请输入姓名"
                           class="border border-gray-300 rounded px-2 py-1 mt-1">
                </p>
                <p class="mt-2">校区：
                    <input type="text"
                           id="campus"
                           placeholder="请输入校区"
                           class="border border-gray-300 rounded px-2 py-1 mt-1">
                </p>
            </div>
        </div>

        <div class="bg-blue-50 p-4 rounded-md border border-blue-100">
            <h2>
                Dear Learners
            </h2>
            <h3 class="font-bold text-primary flex">
                Warm Welcome to DONGS Overseas Academy!
            </h3>
            <p>
                We are delighted to extend a warm welcome to you as you embark on your journey of learning courses
                at our esteemed academy. At DONGS, we are committed to providing a supportive and enriching learning
                environment that will empower you to achieve your goals and excel in your endeavors.
            </p>
            <p>
                我们很高兴热烈欢迎您到董氏留学学习课程。在董氏，我们致力于提供一个支持性和丰富的学习环境，
                使您能够实现自己的目标并在相应考试中取得优异成绩。
            </p>
        </div>

        <div class="bg-blue-50 p-4 mt-5 rounded-md border border-blue-100">
            <ul class="list-disc list-inside mt-2 text-gray-700 text-sm space-y-1">
                <li>请在规定时间内完成所有题目并提交</li>
                <li>点击选项即可选择答案，可随时修改</li>
                <li>请确保网络连接稳定</li>
            </ul>
        </div>
    </div>

    <!-- 第一部分-词汇 -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-book text-primary mr-2"></i>
            词汇:
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        高频核心词汇测试
                    </p>
                </div>
            </div>
        </div>

        <!-- 卡片容器 - 使用flex布局实现一行4个 -->
        <div id="cardContainer" class="grid grid-cols-4 lg:grid-cols-6 gap-3">
        </div>
    </section>

    <!-- 第二部分-语法 -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-pencil text-primary mr-2"></i>
            语法:
        </h3>
        <div class="flex flex-col mt-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    选择正确的选项
                </div>
                <div class="article-content p-6 h-[350px] overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 text-xl leading-relaxed space-y-4">
                        <p>
                            1. By the time the new policy __________, the economic situation had already deteriorated
                            significantly.
                        </p>
                        <p>
                            2. The city __________ we spent our vacation was famous for its stunning architecture and
                            vibrant culture.
                        </p>
                        <p>
                            3. Despite having been warned about the potential risks, the project was continued by the
                            team, _________ great courage.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>请选择
                    </div>
                </div>
                <div class="article-content p-6 h-[350px] overflow-y-auto scrollbar-custom">
                    <div class="space-y-15">
                        <div class="column-layout flex flex-col space-y-2 parent grammarSelectOptions">
                            <!-- 第一 -->
                            <div class="relative row-layout gap-2 bg-white p-3 rounded-lg shadow-sm  border border-gray-100">
                                <i class="absolute top-4 left-4 ">1.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl"><input type="radio" name="select1" value="1"
                                                              class="mr-1 accent-primary">
                                        A. implemented
                                    </p>
                                    <p class="text-xl"><input type="radio" name="select1" value="2"
                                                              class="mr-1 accent-primary">
                                        B. was implemented
                                    </p>
                                    <p class="text-xl"><input type="radio" name="select1" value="3"
                                                              class="mr-1 accent-primary">
                                        C. had implemented
                                    </p>
                                    <p class="text-xl"><input type="radio" name="select1" value="4"
                                                              class="mr-1 accent-primary">
                                        D. had been implemented
                                    </p>
                                </div>

                            </div>

                            <!-- 第二 -->
                            <div class="relative row-layout  gap-2 bg-white child w-full p-3 rounded-lg shadow-sm border border-gray-100">
                                <i class="absolute top-4 left-4 ">2.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl mr-1 "><input type="radio" name="select2" value="1"
                                                                    class="mr-1 accent-primary">
                                        A. which
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select2" value="2"
                                                                     class="mr-1 accent-primary">
                                        B. where
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select2" value="3"
                                                                     class="mr-1 accent-primary">
                                        C. when
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select2" value="4"
                                                                     class="mr-1 accent-primary">
                                        D. whose
                                    </p>
                                </div>
                            </div>

                            <!-- 第三 -->
                            <div class="relative row-layout gap-2 bg-white h-full p-3 rounded-lg shadow-sm border border-gray-100">
                                <i class="absolute top-4 left-4 ">3.</i>
                                <div class="pl-8 grid grid-cols-1 sm:grid-cols-2">
                                    <p class="text-xl mr-1 "><input type="radio" name="select3" value="1"
                                                                    class="mr-1 accent-primary">
                                        A. will show
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select3" value="2"
                                                                     class="mr-1 accent-primary">
                                        B. showed
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select3" value="3"
                                                                     class="mr-1 accent-primary">
                                        C. showing
                                    </p>
                                    <p class="text-xl mr-1  "><input type="radio" name="select3" value="4"
                                                                     class="mr-1 accent-primary">
                                        D. to show
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white mt-5 rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        Paraphrasing is a fundamental writing skill, and this task serves as a straightforward
                        assessment of
                        your paraphrasing abilities.
                    </p>
                    <p>
                        释义是一项基本的写作技能，这项任务可以直接评估您的释义能力。
                    </p>
                </div>
            </div>
        </div>

        <div class="flex flex-col lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    Paraphrase the words in this paragraph. 转述本段中的话
                </div>
                <div class="article-content p-6 h-[400px] overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 leading-relaxed space-y-4">
                        <p>
                            Many people, when driving their cars, go over the speed limit in city centers. As a way of
                            solving this, the government should put more speed cameras on major streets to put people
                            off speeding. If this is done, more people who speed will be caught and this problem will
                            eventually be solved.
                        </p>
                        <p>
                            For example:
                        </p>
                        <p>
                            Below is the standard paraphrase we have created.
                        </p>
                        <p>
                            Many people, when driving their cars, exceed the speed limit in urban centers. As a way of
                            solving this, the authorities ought to install more speed cameras on major streets to deter
                            people from speeding. By doing this, more people who speed will be caught and this problem
                            will eventually be resolved.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        Your Answer你的答案：
                    </div>

                </div>
                <div class="article-content p-6 h-[400px] overflow-y-auto scrollbar-custom">
                    <div class="space-y-8">
                        <textarea
                                id="paraphraseContent"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg resize-none"
                                rows="12" cols="100" placeholder="请输入..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第三部分-听力 -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-headphones text-primary mr-2"></i>
            听力:
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        Welcome to the standard quiz test for the Listening Section 1. This quiz is designed to
                        assess your listening skills in a simulated exam environment. Please carefully read and
                        follow the instructions provided below
                    </p>
                    <p>
                        欢迎来到听力第 1 部分的标准测验测试。本测验旨在评估您在模拟考试环境中的听力技能。请仔细阅读并遵循以下说明:
                    </p><br>
                    <p>
                        1. Timing: Manage your time wisely to
                        ensure you have enough time to listen to the recording and answer all the questions.
                    </p>
                    <p>
                        时间：明智地管理您的时间，以确保您有足够的时间收听录音并回答所有问题。
                    </p><br>
                    <p>
                        2. Question Format: The quiz consists of ten fill-in-the-blank questions. Each question will
                        have a missing word or phrase that you need to complete by listening to the recording. Make sure
                        to pay attention to the specific information required to fill in the blanks accurately.
                        All the answers must be small letters.
                    </p>
                    <p>
                        问题形式：测验由十道填空题组成。每个问题都会缺少一个单词或短语，您需要通过收听录音来完成。
                        请务必注意准确填空所需的具体信息。所有答案必须是小写字母。
                    </p><br>
                    <p>
                        3. Recording: The recording will be played once only. You will not have the opportunity to
                        listen to it again, so listen attentively and take notes if necessary. The recording will be
                        played in a clear and audible manner, but please ensure you are in a quiet environment to
                        maximize your listening comprehension.
                    </p>
                    <p>
                        录音：录音将仅播放一次。您将没有机会再次听，因此请专心聆听并在必要时做笔记。录音将以清晰可听的方式播放，但请确保您
                        处于安静的环境中，以最大限度地提高您的听力理解能力。
                    </p><br>
                    <p>
                        4. Submitting: Once the time is up,
                        please stop writing immediately and ensure all your questions are completed.
                    </p>
                    <p>
                        提交：时间一到，请立即停止写作并确保完成所有问题。
                    </p><br>
                    <p>
                        Remember, this quiz aims to simulate the Listening Section 1 experience and assess your
                        listening skills. Stay focused, listen attentively, and provide accurate answers to the best of
                        your ability within the allocated time.
                    </p>
                    <p>
                        请记住，此测验旨在模拟听力第 1 部分的体验并评估您的听力技能。
                        保持专注，专心倾听，并在分配的时间内尽最大努力提供准确的答案。
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg h-[350px] mb-5 shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                <div class="flex items-center">
                    <i class="fa fa-list-alt text-primary mr-2"></i>
                    请输入你听到的单词(字母全部小写,点击输入框自动播放音频)
                </div>
            </div>
            <div class="h-74 bg-gray-100 rounded-lg p-4 flex gap-4">
                <div id="wordListenDataContainer"
                     class="grid grid-cols-1 md:grid-cols-2 w-full gap-1 bg-white p-6 rounded-xl shadow-md">
                </div>
            </div>
        </div>

        <!-- 隐藏的音频元素 -->
        <audio id="audioPlayer" loop>
            <!-- 这里可以放入实际的音频源 -->
            <source src="http://1.92.74.42:81/mp3/C16T3P1.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio>

        <div class="flex flex-col lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg h-[750px] shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 h-[60px] border-b border-gray-200 font-medium justify-between flex items-center">
                    <div class="flex items-center">
                        <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                        请根据听到的信息回答以下题目(点击右侧播放按钮,只能听一遍)
                    </div>

                    <div id="playButton" class="play-button">
                        <i id="playIcon" class="fa fa-play text-2xl"></i>
                    </div>

                </div>
                <h4 class="mx-auto text-center font-bold w-1/2">
                    JUNIOR CYCLE CAMP
                </h4><br>
                <div class="pl-8" id="listenText">
                    <p>
                        The course focuses on skills and safety.
                    </p>
                    <p>
                        - Charlie would be placed in Level 5.
                    </p>
                    <p>
                        - First of all, children at this level are taken to practise in a 1 [1]
                    </p><br>
                    <p>
                        Instructors
                    </p>
                    <p>
                        - Instructors wear 2 [2] shirts.
                    </p>
                    <p>
                        - A 3 [3] is required and training is given.
                    </p><br>
                    <p>
                        Classes
                    </p>
                    <p>
                        - The size of the classes is limited.
                    </p>
                    <p>
                        - There are quiet times during the morning for a 4 [4] or a game.
                    </p>
                    <p>
                        - Classes are held even if there is 5 [5]
                    </p><br>
                    <p>
                        What to bring
                    </p>
                    <p>
                        - a change of clothing
                    </p>
                    <p>
                        - a 6 [6]
                    </p>
                    <p>
                        - shoes (not sandals)
                    </p>
                    <p>
                        - Charlie's 7 [7]
                    </p><br>
                    <p>
                        Day 1
                    </p>
                    <p>
                        - Charlie should arrive at 9.20 am on the first day.
                    </p>
                    <p>
                        - Before the class, his 8 [8] will be checked.
                    </p>
                    <p>
                        - He should then go to the 9 [9] to meet his class instructor.
                    </p><br>
                    <p>
                        Cost
                    </p>
                    <p>
                        - The course costs 10 $ 10 [10] per week.
                    </p>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg h-[750px] shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 h-[60px] border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        Your Answer你的答案：
                    </div>

                </div>
                <div class="article-content p-6 overflow-y-auto scrollbar-custom">
                    <!-- 存放生成的 input 容器 -->
                    <div id="inputContainer" class="space-y-6"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第四部分-阅读 -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-file-text text-primary mr-2"></i>
            阅读：
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <h2 class="text-lg font-bold mb-1">Quiz Instructions: Reading
                    </h2>
                    <p>
                        Welcome to the standard quiz test for the Reading section. This quiz is designed to assess
                        your reading skills in a simulated exam environment. Please carefully read and follow the
                        instructions provided below:
                    </p><br>
                    <p>
                        1. Timing: Manage your time wisely to
                        ensure you have enough time to read the passages and answer all the questions.
                    </p><br>
                    <p>
                        2. Question Format: The quiz consists of five True/False/Not Given questions. Each question will
                        be accompanied by a statement that you need to determine as either true, false, or if the
                        information is not given in the passage. Pay close attention to the details and information
                        presented in the passage to make an accurate assessment.
                    </p><br>
                    <p>
                        3. Passage Content: Each question corresponds to a specific part of the passage provided. Read
                        the passage carefully to locate the relevant information and make an informed judgment on the
                        accuracy of each statement.
                    </p><br>
                    <p>
                        4. Answering: Write your answers directly on the provided answer sheet. Clearly indicate your
                        response for each question as either "T" for true, "F" for false, or "NG" for not given. Make
                        sure your handwriting is legible to avoid any confusion.
                    </p><br>
                    <p>
                        5. Time Allocation: Allocate your time wisely for each question. If you encounter a challenging
                        question, do not spend too much time on it. Move on to the next question and come back to it
                        later if time permits.
                    </p><br>
                    <p>
                        Remember, this quiz aims to simulate the Reading section experience and assess your
                        reading skills. Stay focused, read the passage carefully, and provide accurate answers to the
                        best of your ability within the allocated time.
                    </p>
                </div>
            </div>
        </div>

        <div class="flex flex-col mt-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    The White Horse of Uffington
                </div>
                <div class="article-content p-6 h-[300px] overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 leading-relaxed space-y-4">
                        <p>
                            The cutting of huge figures or 'geoglyphs' into the earth of English hillsides has taken
                            place for more than 3,000 years. There are 56 hill figures scattered around England,
                            with the vast majority on the chalk downlands of the country's southern counties. The
                            figures include giants, horses, crosses and regimental badges. Although the majority of
                            these geoglyphs date within the last 300 years or so,
                            there are one or two that are much older.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>Do the following statements agree with the
                        information given in above passage?
                    </div>
                </div>

                <div class="article-content p-6 h-[300px] overflow-y-auto scrollbar-custom">
                    <div class="space-y-8">
                        <div class="question-list">
                            <div class="flex items-center mb-4">
                                <h3 class="font-medium text-gray-800">
                                    1. Most geoglyphs in England are located in a particular area of the country.
                                </h3>
                            </div>
                            <div class="space-y-2">
                                <div class="mt-5 pt-3 border-t border-gray-200 bg-gray-50 p-3 rounded
                                relative readingQuestions">
                                    <p><input type="radio" name="q1" value="1" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">TRUE</span>
                                        if the statement agrees with the information
                                    </p><br>
                                    <p><input type="radio" name="q1" value="2" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">FALSE</span>
                                        if the statement contradicts the information
                                    </p><br>
                                    <p><input type="radio" name="q1" value="3" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">NOT GIVEN</span>
                                        if there is no information on this
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-col mt-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    The White Horse of Uffington
                </div>
                <div class="article-content p-6 h-[300px] overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 leading-relaxed space-y-4">
                        <p>
                            The most famous of these figures is perhaps also the most mysterious - the Uffington White
                            Horse in Oxfordshire. The White Horse has recently been re-dated and shown to be even older
                            than its previously assigned ancient pre-Roman Iron Age* date. More controversial is the
                            date of the enigmatic Long Man of Wilmington in Sussex. While many historians are convinced
                            the figure is prehistoric, others believe that it was the work of an artistic monk from a
                            nearby priory and was created between the 11th and 15th centuries.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>Do the following statements agree with the
                        information given in above passage?
                    </div>
                </div>
                <div class="article-content p-6 h-[320px] overflow-y-auto scrollbar-custom">
                    <div class="space-y-8">
                        <div class="question-list">
                            <div class="flex items-center mb-4">
                                <h3 class="font-medium text-gray-800">
                                    2. A recent dating of the Uffington White Horse indicates
                                    that people were mistaken about its age.
                                </h3>
                            </div>
                            <div class="space-y-2">
                                <div class="mt-5 pt-3 border-t border-gray-200 bg-gray-50 p-3 rounded
                                relative readingQuestions">
                                    <p><input type="radio" name="q2" value="1" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">TRUE</span>
                                        if the statement agrees with the information
                                    </p><br>
                                    <p><input type="radio" name="q2" value="2" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">FALSE</span>
                                        if the statement contradicts the information
                                    </p><br>
                                    <p><input type="radio" name="q2" value="3" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">NOT GIVEN</span>
                                        if there is no information on this
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="flex flex-col mt-5 lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    The White Horse of Uffington
                </div>
                <div class="article-content p-6 h-[320px] overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 leading-relaxed space-y-4">
                        <p>
                            The most famous of these figures is perhaps also the most mysterious - the Uffington White
                            Horse in Oxfordshire. The White Horse has recently been re-dated and shown to be even older
                            than its previously assigned ancient pre-Roman Iron Age* date. More controversial is the
                            date of the enigmatic Long Man of Wilmington in Sussex. While many historians are convinced
                            the figure is prehistoric, others believe that it was the work of an artistic monk from a
                            nearby priory and was created between the 11th and 15th centuries.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>Do the following statements agree with the
                        information given in above passage?
                    </div>
                </div>
                <div class="article-content p-6 h-[300px] overflow-y-auto scrollbar-custom">
                    <div class="space-y-8">
                        <div class="question-list">
                            <div class="flex items-center mb-4">
                                <h3 class="font-medium text-gray-800">
                                    3. Historians have come to an agreement
                                    about the origins of the Long Man of Wilmington.
                                </h3>
                            </div>
                            <div class="space-y-2">
                                <div class="mt-5 pt-3 border-t border-gray-200 bg-gray-50 p-3 relative rounded
                                relative readingQuestions">
                                    <p>
                                        <input type="radio" name="q3" value="1" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">TRUE</span>
                                        <span>
                                            if the statement agrees with the information
                                        </span>
                                    </p><br>
                                    <p>
                                        <input type="radio" name="q3" value="2" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">FALSE</span>
                                        if the statement contradicts the information
                                    </p><br>
                                    <p>
                                        <input type="radio" name="q3" value="3" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">NOT GIVEN</span>
                                        if there is no information on this
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-col lg:flex-row mt-5 gap-6">
            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex items-center">
                    <i class="fa fa-sharp-duotone fa-light fa-book text-primary mr-2"></i>
                    The White Horse of Uffington
                </div>
                <div class="article-content p-6 h-[320px] overflow-y-auto scrollbar-custom">
                    <div class="text-gray-700 leading-relaxed space-y-4">
                        <p>
                            The method of cutting these huge figures was simply to remove the overlying grass to reveal
                            the gleaming white chalk below. However, the grass would soon grow over the geoglyph again
                            unless it was regularly cleaned or scoured by a fairly large team of people. One reason that
                            the vast majority of hill figures have disappeared is that when the traditions associated
                            with the figures faded, people no longer bothered or remembered to clear away the grass to
                            expose the chalk outline. Furthermore, over hundreds of years the outlines would sometimes
                            change due to people not always cutting in exactly the same place, thus creating a different
                            shape to the original geoglyph. The fact that any ancient hill figures survive at all in
                            England today is testament to the strength and continuity of local customs and beliefs
                            which,
                            in one case at least, must stretch back over millennia.
                        </p>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>Do the following statements agree with the
                        information given in above passage?
                    </div>
                </div>
                <div class="article-content p-6 h-[320px] overflow-y-auto scrollbar-custom">
                    <div class="space-y-8">
                        <div class="question-list">
                            <div class="flex items-center mb-4">
                                <h3 class="font-medium text-gray-800">
                                    4. Geoglyphs were created by people placing white chalk on the hillside.
                                </h3>
                            </div>
                            <div class="space-y-2">
                                <div class="mt-5 pt-3 border-t border-gray-200 bg-gray-50 p-3 rounded
                                relative readingQuestions">
                                    <p><input type="radio" name="q4" value="1" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">TRUE</span>
                                        if the statement agrees with the information
                                    </p><br>
                                    <p><input type="radio" name="q4" value="2" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">FALSE</span>
                                        if the statement contradicts the information
                                    </p><br>
                                    <p><input type="radio" name="q4" value="3" class="mr-3 accent-primary">
                                        <span style="color: red;font-weight: bold">NOT GIVEN</span>
                                        if there is no information on this
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <!-- 第五部分-写作 -->
    <section class="mb-10">
        <h3 class="section-title flex items-center">
            <i class="fa fa-pencil text-primary mr-2"></i>
            写作：
        </h3>

        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                <div>
                    <p>
                        Please write a body paragraph on the given topic, ensuring that it contains a minimum of 70
                        words.
                    </p>
                    <p>
                        请就给定主题写一个正文段落，确保它至少包含 70 个单词。
                    </p>
                </div>

            </div>
        </div>

        <div class="flex flex-col lg:flex-row gap-6">
            <div class="lg:w-1/2 bg-card rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium">
                    <i class="fa fa-file-text-o text-primary mr-2"></i>内容
                </div>
                <div class="article-content p-5 h-[400px] overflow-y-auto scrollbar-thin">
                    <p>
                        It is important for people to take risks, both in their professional lives and their personal
                        lives.
                    </p><br>
                    <p>
                        Do you think the advantages of taking risks outweigh the disadvantages?
                    </p>
                </div>
            </div>

            <div class="lg:w-1/2 bg-card rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 font-medium flex justify-between ">
                    <div class="flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>
                        Your Answer你的答案：
                    </div>
                </div>
                <div class="p-5 h-[400px] overflow-y-auto scrollbar-thin">
                    <div class="space-y-6">
                        <textarea
                                id="article"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg resize-none"
                                rows="12" cols="100" placeholder="请输入..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-4 mt-10">
    <div class="container mx-auto px-4 text-center text-gray-600 text-sm">
        <p>技术支持:董氏留学 | 出国留学语言水平测试卷-标准版 | 请勿在考试期间刷新页面或关闭浏览器</p>
    </div>
</footer>

<!-- 交卷确认模态框 -->
<div id="submitModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 transform transition-all">
        <div class="text-center mb-4">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-yellow-100 text-accent mb-4">
                <i class="fa fa-exclamation-triangle text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800">确认交卷？</h3>
            <p class="text-gray-600 mt-2">您确定要提交试卷吗？提交后将无法修改答案。</p>
            <div class="mt-6 flex gap-3">
                <button id="cancelSubmit" class="flex-1 btn-secondary">取消</button>
                <button id="confirmSubmit" class="flex-1 btn-primary">确认交卷</button>
            </div>
        </div>
    </div>
</div>

<!-- 提交成功模态框 -->
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 transform transition-all">
        <div class="text-center mb-4">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-success mb-4">
                <i class="fa fa-check text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800">提交成功</h3>
            <p class="text-left text-gray-600 mt-2">转述:<span style="color: red">等待老师评分</span></p>
            <p id="submitData5" class="text-left text-gray-600 mt-2">词汇:正确率: 0 %</p>
            <p id="submitData1" class="text-left text-gray-600 mt-2">语法:正确率: 0 %</p>
            <p id="submitData2" class="text-left text-gray-600 mt-2">听力-短文:正确率: 0 %</p>
            <p id="submitData4" class="text-left text-gray-600 mt-2">听力-单词:正确率: 0 %</p>
            <p id="submitData3" class="text-left text-gray-600 mt-2">阅读:正确率: 0 %</p>
            <p class="text-left text-gray-600 mt-2">写作:<span style="color: red">等待老师评分</span></p>
            <p class="text-gray-600 mt-2">感谢您的参与！</p>
            <div class="mt-6">
                <button id="closeSuccess" class="w-full btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    let userData = {
        list: []
    };


    let correctRate1 = 0
    let correctRate2 = 0
    let correctRate3 = 0
    let correctRate4 = 0
    let correctRate5 = 0

    let correctNum1 = 0
    let correctNum2 = 0
    let correctNum3 = 0
    let correctNum4 = 0
    let correctNum5 = 0

    const cardData = [
        {
            title: 'significant',
            type: 'adj.',
            correct: '重要的，显著的',
            appear: '超高',
            options: ['重要的，显著的', '暗示的', '指示的', '标志的']
        },
        {title: 'environment', type: 'n.', correct: '环境', appear: '超高', options: ['环境', '状态', '历史', '任务']},
        {
            title: 'development',
            type: 'n.',
            correct: '发展，开发',
            appear: '超高',
            options: ['发展，开发', '成绩，成就', '梦想', '描述']
        },
        {title: 'technology', type: 'n.', correct: '技术', appear: '超高', options: ['技术', '生物学', '故事', '科学']},
        {title: 'government', type: 'n.', correct: '政府', appear: '超高', options: ['政府', '人口', '管理', '导致']},
        {title: 'population', type: 'n.', correct: '人口', appear: '超高', options: ['人口', '经济', '历史', '种类']},
        {
            title: 'economic',
            type: 'adj.',
            correct: '经济的',
            appear: '超高',
            options: ['经济的', '节省的', '有效率的', '无聊的']
        },
        {
            title: 'global',
            type: 'adj.',
            correct: '全球的',
            appear: '超高',
            options: ['全球的', '单一的', '国内的', '显著的']
        },
        {title: 'individual', type: 'n.', correct: '个人', appear: '高', options: ['个人', '集体', '分裂', '分割']},
        {title: 'challenge', type: 'n./v.', correct: '挑战', appear: '高', options: ['挑战', '改变', '机会', '选择']},
        {title: 'education', type: 'n.', correct: '教育', appear: '超高', options: ['教育', '责任', '梦想', '义务']},
        {title: 'responsibility', type: 'n.', correct: '责任', appear: '高', options: ['责任', '工作', '回应', '退缩']},
        {title: 'culture', type: 'n.', correct: '文化', appear: '超高', options: ['文化', '历史', '种类', '技术']},
        {title: 'benefit', type: 'n./v.', correct: '益处', appear: '高', options: ['益处', '坏处', '无聊', '糖果']},
        {title: 'method', type: 'n.', correct: '方法', appear: '高', options: ['方法', '任务', '照顾', '剧院']},
        {title: 'policy', type: 'n.', correct: '政策', appear: '高', options: ['政策', '政治', '结束', '经济']},
        {title: 'require', type: 'v.', correct: '要求', appear: '高', options: ['要求', '获得', '咨询', '询问']},
        {title: 'issue', type: 'n.', correct: '问题', appear: '超高', options: ['问题', '事件', '解决方案', '困惑']},
        {title: 'approach', type: 'n.', correct: '方法', appear: '高', options: ['方法', '困惑', '理想', '问题']},
        {
            title: 'process',
            type: 'n./v.',
            correct: '过程；处理',
            appear: '高',
            options: ['过程；处理', '结果', '占有', '问题']
        },
        {title: 'resource', type: 'n.', correct: '资源', appear: '高', options: ['资源', '来源', '结束', '证据']},
        {title: 'society', type: 'n.', correct: '社会', appear: '超高', options: ['社会', '文化', '经济', '娱乐']},
        {
            title: 'various',
            type: 'adj.',
            correct: '各种各样的',
            appear: '高',
            options: ['各种各样的', '其他的', '非常的', '难过的']
        },
        {title: 'opportunity', type: 'n.', correct: '机会', appear: '高', options: ['机会', '挑战', '结束', '来源']},
        {title: 'increase', type: 'v./n.', correct: '增加', appear: '超高', options: ['增加', '减少', '停止', '快乐']},
        {title: 'deminish', type: 'v.', correct: '减少', appear: '高', options: ['减少', '增加', '确认', '破坏']},
        {title: 'influence', type: 'n./v.', correct: '影响', appear: '高', options: ['影响', '减少', '问题', '产生']},
        {
            title: 'alternative',
            type: 'adj.',
            correct: '可替代的',
            appear: '高',
            options: ['可替代的', '可变化的', '确定的', '重要的']
        },
        {title: 'perspective', type: 'n.', correct: '视角', appear: '高', options: ['视角', '未来', '前途', '测算']},
        {
            title: 'sustainable',
            type: 'adj.',
            correct: '可持续的',
            appear: '高',
            options: ['可持续的', '可维持的', '可获得的', '可装载的']
        }]

    // 获取卡片容器
    const questionContainer = document.getElementById('cardContainer');
    userAnswers = []
    userAnswersSelect = {}

    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            // 生成一个从 0 到 i 的随机索引
            const j = Math.floor(Math.random() * (i + 1));
            // 交换元素 array[i] 和 array[j]
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // 渲染所有题目
    function renderQuestions() {
        questionContainer.innerHTML = '';

        let cardDataText = shuffleArray(cardData);
        let questionIndex = 1
        cardDataText.forEach(question => {
            // console.log(question);
            const card = createQuestionCard(question, questionIndex);
            questionIndex++
            questionContainer.appendChild(card);
        });
    }

    function createQuestionCard(question, questionIndex) {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden card-effect';
        card.dataset.questionId = question.id;

        // 卡片内容
        card.innerHTML = `
            <div class="relative bg-neutral px-4 py-2 border-b border-gray-200">
              <span class="text-xl font-medium text-gray-700">${questionIndex}. ${question.title}</span>
              <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">${question.appear}频</span>
            </div>
            <div class="p-4">
              <p class="text-xm font-medium mb-3 text-gray-800">${question.type}</p>
              <div class="space-y-2 cardSelectDivOptions" id="${question.title}-options"></div>
            </div>`;

        // 创建选项
        const optionsContainer = card.querySelector(`#${question.title}-options`);
        let optionItem = shuffleArray(question.options);
        optionItem.forEach((option, index) => {
            const optionEl = document.createElement('div');

            optionEl.id = 'word-select-' + questionIndex;
            optionEl.className = 'p-3 border relative border-gray-200 rounded text-xl option-hover cursor-pointer';

            optionEl.dataset.question = question.title;
            optionEl.dataset.correct = question.correct;

            // 选项内容（带A/B/C/D标识）
            optionEl.innerHTML = `
                  <div class="flex items-center ">
                    <div class="w-5 h-5 rounded border border-gray-300 mr-2 flex-shrink-0
                     flex items-center justify-center text-gray-500 text-xs">
                      ${String.fromCharCode(65 + index)}
                    </div><span class="text-xs">${option}</span>
                  </div>`;

            // 绑定点击事件
            optionEl.addEventListener('click', () => selectOption(optionEl, option, index));
            optionsContainer.appendChild(optionEl);
        });
        return card;
    }

    //显示正确的选项,在提交后
    function showCorrectAnswer(flag) {
        showCorrectAnswerWordSelect(flag)
        showCorrectAnswerGrammarSelect(flag)
        showCorrectAnswerWordListened(flag)
        showCorrectAnswerParagraphListened(flag)
        showCorrectAnswerReading(flag)
    }

    //1.第一题-单词选择
    function showCorrectAnswerWordSelect(flag) {
        const inner = document.querySelectorAll('.cardSelectDivOptions')
        inner.forEach((option, index) => {
            // console.log(index +'---'+ option.tagName.toLowerCase());
            let childrenByLevel = getChildrenByLevel(option, 1);
            childrenByLevel.forEach((optionChild, index) => {
                let userSelectOption = optionChild.dataset.userSelectOption;
                const optionText = optionChild.firstElementChild.firstElementChild.nextElementSibling.textContent
                if (userSelectOption === optionText) {
                    // console.log(userSelectOption);
                    if (userSelectOption === optionChild.dataset.correct) {
                        optionChild.classList.remove('option-selected');
                        optionChild.classList.add('border-green-500', 'bg-green-50');
                        // 添加正确标记
                        const correctIcon = document.createElement('i');
                        correctIcon.className = 'fa fa-check absolute right-4 top-1/2 transform -translate-y-1/2 text-green-500';
                        optionChild.appendChild(correctIcon);
                    } else if (userSelectOption !== undefined) {
                        if (flag) {
                            optionChild.classList.remove('option-selected');
                            optionChild.classList.add('border-red-500', 'bg-red-50');
                            // 添加错误标记
                            const wrongIcon = document.createElement('i');
                            wrongIcon.className = 'fa fa-times absolute right-4 top-1/2 transform -translate-y-1/2 text-red-500';
                            optionChild.appendChild(wrongIcon);
                        }
                    }
                }
            })
        })
    }

    //2-第二题-语法选择
    function showCorrectAnswerGrammarSelect(flag) {
        let element = document.querySelectorAll('input[name^="select"]:checked');
        element.forEach((option, index) => {
            const optionResult = grammarCorrect[index] === parseInt(option.value.toString());
            // console.log(option);
            const parentByLevel = getParentByLevel(option, 3);
            if (optionResult) {
                option.parentElement.classList.add('border-green-500', 'bg-green-50');
                // 添加正确标记
                const correctIcon = document.createElement('i');
                correctIcon.className = 'fa fa-check absolute right-4 top-1/2 transform -translate-y-1/2 text-green-500';
                parentByLevel.appendChild(correctIcon);
            } else {
                if (flag) {
                    // 添加错误标记
                    const wrongIcon = document.createElement('i');
                    wrongIcon.className = 'fa fa-times absolute right-4 top-1/2 transform -translate-y-1/2 text-red-500';
                    parentByLevel.appendChild(wrongIcon);
                }
            }
        })
    }

    //3-第四题-听力单词
    function showCorrectAnswerWordListened(flag) {
        let elements = document.getElementById('wordListenDataContainer').children

        // console.log(elements);
        const elementArray = [...elements];
        elementArray.forEach((option, index) => {
            const inputElement = option.getElementsByTagName('input');
            const resultFlag = listenWordShuffle[index] === inputElement[0].value;
            if (resultFlag) {
                // 添加正确标记
                const correctIcon = document.createElement('i');
                correctIcon.className = 'fa fa-check absolute right-4 top-1/2 transform -translate-y-1/2 text-green-500';
                option.appendChild(correctIcon);
            } else {
                if (flag) {
                    // 添加错误标记
                    const wrongIcon = document.createElement('i');
                    wrongIcon.className = 'fa fa-times absolute right-4 top-1/2 transform -translate-y-1/2 text-red-500';
                    option.appendChild(wrongIcon);
                }
            }
        })
    }

    //4-第五题-听力短文
    function showCorrectAnswerParagraphListened(flag) {
        let elements = document.getElementById('inputContainer').children

        const elementArray = [...elements];
        elementArray.forEach((option, index) => {
            const inputElement = option.getElementsByTagName('input');
            // console.log(option)
            const resultFlag = listenParagraphContext[index] === inputElement[0].value;
            // console.log(option.lastElementChild);
            if (resultFlag) {
                // 添加正确标记
                const correctIcon = document.createElement('i');
                correctIcon.className = 'fa fa-check absolute right-4 top-1/2 transform -translate-y-1/2 text-green-500';
                option.appendChild(correctIcon);
            } else {
                if (flag) {
                    // 添加错误标记
                    const wrongIcon = document.createElement('i');
                    wrongIcon.className = 'fa fa-times absolute right-4 top-1/2 transform -translate-y-1/2 text-red-500';
                    option.appendChild(wrongIcon);
                }
            }
        })
    }

    //5-第六题-阅读理解
    function showCorrectAnswerReading(flag) {
        const elementNodeList = document.querySelectorAll('.readingQuestions');
        const lists = [...elementNodeList];
        // console.log(lists.length);
        lists.forEach((list, listIndex) => {
            const selectorInput = list.querySelectorAll('input:checked');
            if (selectorInput.length === 0) {
                return;
            }
            selectorInput.forEach(option => {
                // console.log(option.parentNode);
                if (readingCorrect[listIndex].toString() === option.value) {
                    option.parentNode.classList.add('border-green-500', 'bg-green-50');
                    // 添加正确标记
                    const correctIcon = document.createElement('i');
                    correctIcon.className = 'fa fa-check absolute right-4 top-1/4 transform -translate-y-1/2 text-green-500';
                    option.parentNode.insertBefore(correctIcon, option.nextSibling);
                }
                else {
                    if (flag) {
                        option.parentNode.classList.add('border-red-500', 'bg-red-50');
                        // 添加错误标记
                        const wrongIcon = document.createElement('i');
                        wrongIcon.className = 'fa fa-times absolute right-4 top-1/2 transform -translate-y-1/2 text-red-500';
                        option.parentNode.appendChild(wrongIcon);
                    }
                }
            })
        })

    }

    function selectOption(optionEl, option, index) {
        const questionId = optionEl.dataset.question;

        //记录用户选择
        // optionEl.dataset.userSelectOption = option;
        // 清除同一题的其他选项选中状态
        document.querySelectorAll(`[data-question="${questionId}"]`).forEach(el => {
            // console.log(el);
            el.dataset.userSelectOption = option;
            el.classList.remove('option-selected');
            el.querySelector('div:first-child div:first-child')
                .classList.remove('text-white', 'border-primary');
            el.querySelector('div:first-child div:first-child')
                .classList.add('border-gray-300', 'text-gray-500');
        });
        // console.log(option);

        // 设置当前选项为选中状态
        optionEl.classList.add('option-selected');
        optionEl.querySelector('div:first-child div:first-child').classList.remove('border-gray-300');
        optionEl.querySelector('div:first-child div:first-child').classList.add('border-primary');

        //提交数据
        let item = {
            questionsNumber: optionEl.id.split('-')[2],
            score: 1,
            correctAnswer: 0, //
            correctText: optionEl.dataset.correct, //
            userText: option,
            questionsText: 'word-select-english',
        };

        //提交数据
        if (!userAnswers.includes(questionId)) {
            userAnswers.push(questionId);
            userData.list.push(item);
        } else {
            userData.list = userData.list.filter(item => item.correctText !== optionEl.dataset.correct);
            userData.list.push(item);
        }
        // console.log(userAnswersSelect);

        //记录正确率
        correctNum5 = 0
        userAnswersSelect[questionId] = optionEl.dataset.correct === option;
        Object.values(userAnswersSelect).forEach((value) => {
            if (value) {
                correctNum5++
            }
        })
        correctRate5 = parseInt((correctNum5 * 100 / 30).toString());
        // console.log(correctNum5);
    }

    function updateListenContent() {
        let textContent = document.getElementById('listenText').innerHTML;
        const findContent = /\d* \[\d*]/g
        // 记录匹配次数（从1开始，每次匹配后自增）
        let matchCount = 1;

        document.getElementById('listenText').innerHTML = textContent.replace(new RegExp(findContent, "g"), () => {
            let replaceContent = '<span class="blank-wrapper"><span class="blank"></span><span class="blank-number">' + matchCount + '</span></span>'
            matchCount++; // 次数自增
            return replaceContent;
        });
    }

    const listenParagraphContext = ['park', 'blue', 'reference', 'story', 'rain', 'snack', 'medication', 'helmet',
        'tent', '199/one hundred ninety-nine/one hundred and ninety-nine/a hundred ninety-nine/a hundred and ninety-nine']

    const listenWordContext = ['accomodation', 'assignment', 'deadline',
        'requirement', 'schedule', 'faculty', 'booking', 'scholarship', 'fee', 'application']

    const listenWordShuffle = shuffleArray(listenWordContext)

    const readingCorrect = [1, 1, 2, 2]
    const grammarCorrect = [2, 2, 3]

    function addWordListenContent() {
        // 1. 获取容器元素
        const inputContainer = document.getElementById('wordListenDataContainer');
        for (let i = 0; i < listenWordShuffle.length; i++) {
            // 创建外层容器（包裹序号和 input）
            const inputWrapper = document.createElement('div');
            inputWrapper.className = 'flex relative items-center gap-3'; // Tailwind 弹性布局，间距 3

            // 创建序号标签
            const label = document.createElement('span');
            label.className = 'w-16 text-center font-medium'; // 固定宽度，居中对齐
            label.textContent = `${i + 1}.`; // 序号从 1 开始

            // 创建 input 元素
            const input = document.createElement('input');
            // 设置 input 属性
            input.type = 'text'; // 文本类型
            input.correctText = listenWordShuffle[i]; // 文本类型
            input.name = `input-${i + 1}`; // 命名区分（如 input-1、input-2）
            input.id = `input-word-${i + 1}`; // ID 唯一
            input.placeholder = `请输入第 ${i + 1} 个内容`; // 提示文本
            input.addEventListener('focus', () => {
                handleColumnAudio(input.correctText)
            })
            // Tailwind 样式：全宽、边框、圆角、内边距
            input.className = 'wordInput w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500';

            // 3. 组装元素并添加到容器
            inputWrapper.appendChild(label);
            inputWrapper.appendChild(input);
            inputContainer.appendChild(inputWrapper);
            // console.log(input);
        }
    }

    function updateListenInput() {
        // 1. 获取容器元素
        const inputContainer = document.getElementById('inputContainer');

        // 2. 循环生成 10 个 input
        for (let i = 0; i < 10; i++) {
            // 创建外层容器（包裹序号和 input）
            const inputWrapper = document.createElement('div');
            inputWrapper.className = 'flex relative items-center gap-3'; // Tailwind 弹性布局，间距 3

            // 创建序号标签
            const label = document.createElement('span');
            label.className = 'w-6 text-center font-medium'; // 固定宽度，居中对齐
            label.textContent = `${i + 1}.`; // 序号从 1 开始

            // 创建 input 元素
            const input = document.createElement('input');
            // 设置 input 属性
            input.type = 'text'; // 文本类型
            input.correctText = listenParagraphContext[i]; // 文本类型
            input.name = `input-${i + 1}`; // 命名区分（如 input-1、input-2）
            input.id = `input-${i + 1}`; // ID 唯一
            input.placeholder = `请输入第 ${i + 1} 个内容`; // 提示文本
            // Tailwind 样式：全宽、边框、圆角、内边距
            input.className = 'paraphraseInput w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500';

            // 3. 组装元素并添加到容器
            inputWrapper.appendChild(label);
            inputWrapper.appendChild(input);
            inputContainer.appendChild(inputWrapper);
        }
    }

    // 计时器功能
    function startTimer() {
        let minutes = 40
        let seconds = 0;
        const timerElement = document.getElementById('timer');

        const interval = setInterval(() => {
            // 更新显示
            timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            // 时间减少
            if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(interval);
                    // 时间到自动提交
                    document.getElementById('submitBtn').click();
                    return;
                }
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }

            // 剩余5分钟时警告
            if (minutes < 5) {
                timerElement.classList.add('text-danger', 'animate-pulse');
            }
        }, 1000);
    }

    // 交卷功能
    const submitBtn = document.getElementById('submitBtn');
    const submitModal = document.getElementById('submitModal');
    const cancelSubmit = document.getElementById('cancelSubmit');
    const confirmSubmit = document.getElementById('confirmSubmit');
    const successModal = document.getElementById('successModal');
    const closeSuccess = document.getElementById('closeSuccess');

    submitBtn.addEventListener('click', () => {
        submitModal.classList.remove('hidden');
        // successModal.classList.remove('hidden');
    });

    cancelSubmit.addEventListener('click', () => {
        submitModal.classList.add('hidden');
    });

    confirmSubmit.addEventListener('click', () => {
        let check = getUserInputData()
        if (check) {
            submitModal.classList.add('hidden');
            //语法
            getSubmitResult("submitData1", correctRate1, correctNum1 + '/3')
            //听力-短文
            getSubmitResult("submitData2", correctRate2, correctNum2 + '/10')
            //阅读
            getSubmitResult("submitData3", correctRate3, correctNum3 + '/4')
            //听力-单词
            getSubmitResult("submitData4", correctRate4, correctNum4 + '/10')
            //词汇
            getSubmitResult("submitData5", correctRate5, correctNum5 + '/30')
            successModal.classList.remove('hidden');
            correctNum1 = 0
            correctNum3 = 0
            correctNum4 = 0
            // console.log(userData);
            submitData()
        } else {
            submitModal.classList.add('hidden');
        }
    });

    closeSuccess.addEventListener('click', () => {
        successModal.classList.add('hidden');

        document.querySelectorAll('.btn-accent').forEach(item => {
            item.style.display = 'block';
        })

        //location.reload(); // 普通刷新（可能从缓存加载）
    });

    function getSubmitResult(id, rate, correct) {
        let elementById = document.getElementById(id);
        let num = id.substring(id.length - 1);
        let title = ''
        if (parseInt(num) === 2) {
            title = '听力-短文:'
        } else if (parseInt(num) === 3) {
            title = '阅读:'
        } else if (parseInt(num) === 4) {
            title = '听力-单词:'
        } else if (parseInt(num) === 1) {
            title = '语法:'
        } else if (parseInt(num) === 5) {
            title = '词汇:'
        }
        elementById.innerHTML = title + "-正确个数:" + correct + "-正确率:" + rate + "%"
    }

    //提交数据到服务器
    function submitData() {
        // console.log(JSON.stringify(userData))
        // 发送 POST 请求
        fetch('http://1.92.74.42:8088/comprehensive/exam', {
            method: 'POST', // 指定 POST 方法
            headers: {
                'Content-Type': 'application/json', // 声明数据格式为 JSON
                // 可添加其他请求头，如认证信息
                // 'Authorization': 'Bearer token123'
            },
            body: JSON.stringify(userData) // 将数据转为 JSON 字符串
        }).then(response => {
            if (!response.ok) {
                throw new Error('提交失败');
            }
            return response.json(); // 解析后端返回的 JSON 响应
        }).then(() => {
            userData = {}
            selectQuestionValueList = []
        }).catch(() => {
            alert('提交失败，请重试');
        });
    }

    //判断用户输入是否完整
    function getUserInputData() {
        let name = document.getElementById('name').value;
        let campus = document.getElementById('campus').value;
        if (name === null || name === '') {
            alert('Please enter your name');
            return false;
        }
        if (campus === null || campus === '') {
            alert('Please enter your campus');
            return false;
        }
        userData.name = name;
        userData.campus = campus;
        userData.typeName = '标准版';
        //翻译
        getUserAnswerData('paraphraseContent', 'Paraphrase the words in this paragraph', 20)
        //听力
        getUserListenAnswerWord('inputContainer', 'word listen and input1')
        getUserListenAnswerData('inputContainer', 'JUNIOR CYCLE CAMP')
        //写作
        getUserAnswerData('article', 'article', 30)
        return true;
    }

    function getUserAnswerData(id, title, score) {
        let paraphraseContent = document.getElementById(id).value
        let item = {
            questionsNumber: 1,
            score: score,
            correctAnswer: 0, //
            userText: paraphraseContent,
            questionsText: title
        };
        if (item.userText !== '') {
            userData.list.push(item);
        }
    }

    let selectQuestionValueList = [];

    function getUserListenAnswerData(id, title) {
        let inputGroup = document.getElementById(id)

        // 2.1 选择 div 内所有 input（返回 NodeList 集合）
        const inputs = inputGroup.querySelectorAll('input', '.paraphraseInput');
        let correctNum = 0

        // 2.2 遍历集合，收集值（支持 forEach/for 循环）
        inputs.forEach((input, index) => {
            // 获取 input 的关键信息：类型、占位符、输入值
            const inputInfo = {
                questionsNumber: index + 1,          // 序号（从1开始）
                correctText: input.correctText, //
                correctAnswer: 0,
                score: 2,
                userText: input.value.trim(),  // 输入值（去空格）
                questionsText: title
            };
            if (inputInfo.correctText.indexOf('/') === -1) {
                if (inputInfo.correctText.toLowerCase() === inputInfo.userText.toLowerCase()) {
                    correctNum++;
                }
            } else {
                let correctArrays = inputInfo.correctText.split('/');
                if (correctArrays.includes(inputInfo.userText.toLowerCase())) {
                    correctNum++;
                }
            }
            if (inputInfo.userText !== '') {
                userData.list.push(inputInfo);
            }
        });

        correctNum2 = correctNum
        correctRate2 = parseInt((correctNum * 100 / inputs.length).toString());
    }

    function getUserListenAnswerWord(id, title) {
        let inputGroup = document.getElementById(id)

        // 2.1 选择 div 内所有 input（返回 NodeList 集合）
        const inputs = inputGroup.querySelectorAll('input', '.wordInput');
        // console.log(inputs.length)

        // 2.2 遍历集合，收集值（支持 forEach/for 循环）
        inputs.forEach((input, index) => {
            // 获取 input 的关键信息：类型、占位符、输入值
            const inputInfo = {
                questionsNumber: index + 1,          // 序号（从1开始）
                correctText: input.correctText, //
                correctAnswer: 0,
                score: 2,
                userText: input.value.trim(),  // 输入值（去空格）
                questionsText: title
            };
            // console.log(inputInfo);
            if (inputInfo.correctText.indexOf('/') === -1) {
                if (inputInfo.correctText.toLowerCase() === inputInfo.userText.toLowerCase()) {
                    correctNum4++;
                }
            } else {
                let correctArrays = inputInfo.correctText.split('/');
                if (correctArrays.includes(inputInfo.userText.toLowerCase())) {
                    correctNum4++;
                }
            }
            if (inputInfo.userText !== '') {
                userData.list.push(inputInfo);
            }
        });

        correctRate4 = parseInt((correctNum4 * 100 / inputs.length).toString());
    }

    // 实时监听选择变化
    document.querySelectorAll('input[name^="q"]').forEach(radio => {
        radio.addEventListener('change', function () {
            let selectedValue = getSelectedValue(this.name);
            let number = this.name.toString().substring(1);
            const inputInfo = {
                questionsNumber: number,          // 序号（从1开始）
                correctText: '', //
                correctAnswer: readingCorrect[number - 1],
                score: 5,
                userText: '',
                userAnswer: selectedValue,
                questionsText: this.name
            };

            if (selectQuestionValueList.indexOf(this.name) === -1) {
                selectQuestionValueList.push(this.name);
                userData.list.push(inputInfo);
                if (inputInfo.correctAnswer === parseInt(inputInfo.userAnswer)) {
                    correctNum3 ++;
                }
            } else {
                userData.list = userData.list.filter(item => item.questionsText !== this.name);
                userData.list.push(inputInfo);
            }

            correctRate3 = parseInt((correctNum3 * 100 / 4).toString());
            // console.log(userData.list);
        });
    });

    document.querySelectorAll('input[name^="select"]').forEach(radio => {
        radio.addEventListener('change', function () {
            let selectedValue = getSelectedValue(this.name);
            let number = this.name.toString().substring(6);
            const inputInfo = {
                questionsNumber: number,          // 序号（从1开始）
                correctText: '', //
                correctAnswer: grammarCorrect[number - 1],
                score: 5,
                userText: '',
                userAnswer: selectedValue,
                questionsText: this.name
            };

            if (selectQuestionValueList.indexOf(this.name) === -1) {
                selectQuestionValueList.push(this.name);
                userData.list.push(inputInfo);
                if (inputInfo.correctAnswer === parseInt(inputInfo.userAnswer)) {
                    correctNum1++;
                }
            } else {
                userData.list = userData.list.filter(item => item.questionsText !== this.name);
                userData.list.push(inputInfo);
            }

            correctRate1 = parseInt((correctNum1 * 100 / selectQuestionValueList.length).toString());
            // console.log(userData.list);
        });
    });

    document.querySelectorAll('.btn-accent').forEach(item => {
        item.style.display = 'none';
    })

    // 方法：根据name属性获取选中的值
    function getSelectedValue(name) {
        // 关键：通过模板字符串将参数拼接到选择器中
        const selected = document.querySelector(`input[name="${name}"]:checked`);
        return selected ? selected.value : "none";
    }

    // 获取元素
    const playButton = document.getElementById('playButton');
    const playIcon = document.getElementById('playIcon');
    const audioPlayer = document.getElementById('audioPlayer');

    // 播放状态
    let isPlaying = false;

    // 按钮点击事件
    // playButton.addEventListener('click', togglePlayback);
    playButton.addEventListener('click', playOnce);

    function playOnce() {
        audioPlayer.play()
        playButton.style.display = "none"; // 完全隐藏，不占空间
    }

    function handleColumnAudio(name) {
        // console.log(name);
        window.speechSynthesis.resume();
        const speech = new SpeechSynthesisUtterance();
        speech.text = name;
        speech.lang = "en-US";
        speech.volume = 1;
        speech.rate = 1;
        speech.pitch = 1;
        window.speechSynthesis.speak(speech);
    }


    // 音频结束时重置状态
    audioPlayer.addEventListener('ended', () => {
        isPlaying = false;
    });

    // 页面加载完成后启动计时器
    window.addEventListener('DOMContentLoaded', () => {
        // 初始渲染卡片
        renderQuestions()
        addWordListenContent()
        // addWordListenContent1()
        // addWordListenContent2()
        updateListenContent()
        updateListenInput()
        // handleButtonClick()
        startTimer();

    });
</script>
</body>
</html>
